<template>
  <div class="homeContainer">
    <div class="centerBox">
      <div class="centerLeft">
        <InnterMap
          :airTestsObj="airTestsObj"
          :airTests1Obj="airTests1Obj"
          :airTestsAreaObj="airTestsAreaObj"
          :airTestsRouteObj="airTestsRouteObj"
          :airTestsFilterObj="airTestsFilterObj"
          :airports="airports"
          :airports1="airports1"
          :airports2="airports2"
          :areaStatic="areaStatic"
          :areaStatic1="areaStatic1"
          :routeWayPoints="routeWayPoints"
        />
        <div class="mapInfoBox">
          <span>星座: {{ leftInfoBox.star }}</span>
          <span>仰角: {{ leftInfoBox.angle }}度</span>
          <span>算法: {{ leftInfoBox.sf }}</span>
          <span>NANU报: {{ leftInfoBox.nanu }}</span>
          <span>运行标准: {{ leftInfoBox.go }}</span>
          <span>历书周: {{ leftInfoBox.almanacWeek }}</span>
          <span>周内秒: {{ leftInfoBox.secondsOfWeek }}</span>
          <span>数据更新时间(UTC): {{ leftInfoBox.time }}</span>
        </div>
      </div>
      <div class="centerRight">
        <div class="rightTop">
          <div
            @click="changeTabIndex(1)"
            class="rightBtn"
            :class="{ rightBtnCur: changeCurIndex == 1 }"
          >
            机场预测
          </div>
          <div
            @click="changeTabIndex(2)"
            class="rightBtn"
            :class="{ rightBtnCur: changeCurIndex == 2 }"
          >
            机场终端区预测
          </div>
          <div
            @click="changeTabIndex(3)"
            class="rightBtn"
            :class="{ rightBtnCur: changeCurIndex == 3 }"
            style="margin-right: 0px !important"
          >
            区域静态预测
          </div>
          <div
            @click="changeTabIndex(4)"
            class="rightBtn"
            :class="{ rightBtnCur: changeCurIndex == 4 }"
          >
            区域统计预测
          </div>
          <div
            @click="changeTabIndex(5)"
            class="rightBtn"
            :class="{ rightBtnCur: changeCurIndex == 5 }"
          >
            航路态势预测
          </div>
          <div
            @click="changeTabIndex(6)"
            class="rightBtn"
            :class="{ rightBtnCur: changeCurIndex == 6 }"
            style="margin-right: 0px !important"
          >
            航路分时预测
          </div>
          <div
            @click="changeTabIndex(7)"
            class="rightBtn"
            :class="{ rightBtnCur: changeCurIndex == 7 }"
          >
            航线分时预测
          </div>
        </div>
        <!-- 机场预测 -->
        <div
          v-if="changeCurIndex == 1"
          class="rightInfo custom-select-container"
        >
          <div class="airport-select-container">
            <div class="select-item">
              <label>选择机场1</label>
              <el-select v-model="airport11" placeholder="">
                <el-option
                  v-for="item in airportList"
                  :key="item.id"
                  :label="`(${item.airportCode})${item.city}/${item.name}`"
                  :value="item.airportCode"
              /></el-select>
            </div>
            <div class="select-item">
              <label>选择机场2</label>
              <el-select v-model="airport12" placeholder="">
                <el-option
                  v-for="item in airportList"
                  :key="item.id"
                  :label="`(${item.airportCode})${item.city}/${item.name}`"
                  :value="item.airportCode"
              /></el-select>
            </div>
            <div class="select-item">
              <label>选择机场3</label>
              <el-select v-model="airport13" placeholder="">
                <el-option
                  v-for="item in airportList"
                  :key="item.id"
                  :label="`(${item.airportCode})${item.city}/${item.name}`"
                  :value="item.airportCode"
              /></el-select>
            </div>
            <div class="select-item">
              <label>选择机场4</label>
              <el-select v-model="airport14" placeholder="">
                <el-option
                  v-for="item in airportList"
                  :key="item.id"
                  :label="`(${item.airportCode})${item.city}/${item.name}`"
                  :value="item.airportCode"
              /></el-select>
            </div>
            <div class="select-item">
              <label>选择机场5</label>
              <el-select v-model="airport15" placeholder="">
                <el-option
                  v-for="item in airportList"
                  :key="item.id"
                  :label="`(${item.airportCode})${item.city}/${item.name}`"
                  :value="item.airportCode"
              /></el-select>
            </div>
            <div class="select-item">
              <label>预测星座</label>
              <el-select v-model="optionsListSatsysDefault" placeholder="">
                <el-option
                  v-for="item in optionsListSatsys"
                  :key="item.id"
                  :label="item.desc"
                  :value="item.id"
                />
              </el-select>
            </div>
            <div class="select-item">
              <label>预测仰角（度）</label>
              <el-select v-model="optionsListAngleDefault" placeholder="">
                <el-option
                  v-for="item in optionsListAngle"
                  :key="item.id"
                  :label="item.desc"
                  :value="item.id"
                />
              </el-select>
            </div>
            <div class="select-item">
              <label>算法</label>
              <el-select v-model="optionsListAlgorithmDefault" placeholder="">
                <el-option
                  v-for="item in optionsListAlgorithm"
                  :key="item.id"
                  :label="item.desc"
                  :value="item.id"
                />
              </el-select>
            </div>
          </div>
        </div>
        <!-- 机场终端区预测 -->
        <div
          v-if="changeCurIndex == 2"
          class="rightInfo custom-select-container"
        >
          <div class="airport-select-container">
            <div class="select-item">
              <label>选择机场1</label>
              <el-select v-model="airport21" placeholder="">
                <el-option
                  v-for="item in airportList"
                  :key="item.id"
                  :label="`(${item.airportCode})${item.city}/${item.name}`"
                  :value="item.airportCode"
              /></el-select>
            </div>
            <div class="select-item">
              <label>选择机场2</label>
              <el-select v-model="airport22" placeholder="">
                <el-option
                  v-for="item in airportList"
                  :key="item.id"
                  :label="`(${item.airportCode})${item.city}/${item.name}`"
                  :value="item.airportCode"
              /></el-select>
            </div>
            <div class="select-item">
              <label>选择机场3</label>
              <el-select v-model="airport23" placeholder="">
                <el-option
                  v-for="item in airportList"
                  :key="item.id"
                  :label="`(${item.airportCode})${item.city}/${item.name}`"
                  :value="item.airportCode"
              /></el-select>
            </div>
            <div class="select-item">
              <label>选择机场4</label>
              <el-select v-model="airport24" placeholder="">
                <el-option
                  v-for="item in airportList"
                  :key="item.id"
                  :label="`(${item.airportCode})${item.city}/${item.name}`"
                  :value="item.airportCode"
              /></el-select>
            </div>
            <div class="select-item">
              <label>选择机场5</label>
              <el-select v-model="airport25" placeholder="">
                <el-option
                  v-for="item in airportList"
                  :key="item.id"
                  :label="`(${item.airportCode})${item.city}/${item.name}`"
                  :value="item.airportCode"
              /></el-select>
            </div>
            <div class="select-item">
              <label>预测星座</label>
              <el-select v-model="optionsListSatsysDefault2" placeholder="">
                <el-option
                  v-for="item in optionsListSatsys"
                  :key="item.id"
                  :label="item.desc"
                  :value="item.id"
                />
              </el-select>
            </div>
            <div class="select-item">
              <label>预测仰角（度）</label>
              <el-select v-model="optionsListAngleDefault2" placeholder="">
                <el-option
                  v-for="item in optionsListAngle"
                  :key="item.id"
                  :label="item.desc"
                  :value="item.id"
                />
              </el-select>
            </div>
            <div class="select-item">
              <label>算法</label>
              <el-select v-model="optionsListAlgorithmDefault2" placeholder="">
                <el-option
                  v-for="item in optionsListAlgorithm"
                  :key="item.id"
                  :label="item.desc"
                  :value="item.id"
                />
              </el-select>
            </div>
          </div>
        </div>
        <!-- 区域静态预测 -->
        <div
          v-if="changeCurIndex == 3"
          class="rightInfo custom-select-container"
        >
          <div class="airport-select-container">
            <div class="select-item">
              <label>预测星座</label>
              <el-select v-model="optionsListSatsysDefault3" placeholder="">
                <el-option
                  v-for="item in optionsListSatsys"
                  :key="item.id"
                  :label="item.desc"
                  :value="item.id"
                />
              </el-select>
            </div>
            <div class="select-item">
              <label>预测仰角（度）</label>
              <el-select v-model="optionsListAngleDefault3" placeholder="">
                <el-option
                  v-for="item in optionsListAngle"
                  :key="item.id"
                  :label="item.desc"
                  :value="item.id"
                />
              </el-select>
            </div>
            <div class="select-item">
              <label>算法</label>
              <el-select v-model="optionsListAlgorithmDefault3" placeholder="">
                <el-option
                  v-for="item in optionsListAlgorithm"
                  :key="item.id"
                  :label="item.desc"
                  :value="item.id"
                />
              </el-select>
            </div>
            <div class="select-item">
              <label>选择开始预测时间（UTC）</label>
              <el-date-picker
                :show-now="false"
                v-model="selectedAreaDateTime"
                type="datetime"
                placeholder="选择日期时间"
                class="custom-datetime-picker"
              />
            </div>
          </div>
        </div>
        <!-- 区域统计预测 -->
        <div
          v-if="changeCurIndex == 4"
          class="rightInfo custom-select-container"
        >
          <div class="airport-select-container">
            <div class="select-item">
              <label>预测星座</label>
              <el-select v-model="optionsListSatsysDefault4" placeholder="">
                <el-option
                  v-for="item in optionsListSatsys"
                  :key="item.id"
                  :label="item.desc"
                  :value="item.id"
                />
              </el-select>
            </div>
            <div class="select-item">
              <label>预测仰角（度）</label>
              <el-select v-model="optionsListAngleDefault4" placeholder="">
                <el-option
                  v-for="item in optionsListAngle"
                  :key="item.id"
                  :label="item.desc"
                  :value="item.id"
                />
              </el-select>
            </div>
            <div class="select-item">
              <label>算法</label>
              <el-select v-model="optionsListAlgorithmDefault4" placeholder="">
                <el-option
                  v-for="item in optionsListAlgorithm"
                  :key="item.id"
                  :label="item.desc"
                  :value="item.id"
                />
              </el-select>
            </div>
            <div class="select-item">
              <label>请选择开始时间（UTC）</label>
              <el-date-picker
                :show-now="false"
                v-model="handleAreaStartTime"
                type="datetime"
                placeholder=""
                class="custom-datetime-picker"
              />
            </div>
            <div class="select-item">
              <label>请选择结束时间（UTC）</label>
              <el-date-picker
                :show-now="false"
                v-model="handleAreaEndTime"
                type="datetime"
                placeholder=""
                class="custom-datetime-picker"
              />
            </div>
            <div class="select-item">
              <label>自动更新（分钟）</label>
              <el-select v-model="autoUpdateTime" placeholder="">
                <el-option
                  v-for="item in timeArrObj"
                  :key="item.id"
                  :label="item.desc"
                  :value="item.id"
                />
              </el-select>
            </div>
          </div>
        </div>
        <!-- 航路态势预测 -->
        <div
          v-if="changeCurIndex == 5"
          class="rightInfo custom-select-container"
        >
          <div class="airport-select-container">
            <div class="select-item">
              <label>预测星座</label>
              <el-select v-model="optionsListSatsysDefault5" placeholder="">
                <el-option
                  v-for="item in optionsListSatsys"
                  :key="item.id"
                  :label="item.desc"
                  :value="item.id"
                />
              </el-select>
            </div>
            <div class="select-item">
              <label>预测仰角（度）</label>
              <el-select v-model="optionsListAngleDefault5" placeholder="">
                <el-option
                  v-for="item in optionsListAngle"
                  :key="item.id"
                  :label="item.desc"
                  :value="item.id"
                />
              </el-select>
            </div>
            <div class="select-item">
              <label>算法</label>
              <el-select v-model="optionsListAlgorithmDefault5" placeholder="">
                <el-option
                  v-for="item in optionsListAlgorithm"
                  :key="item.id"
                  :label="item.desc"
                  :value="item.id"
                />
              </el-select>
            </div>
            <div class="select-item">
              <label>最低运行标准</label>
              <el-select v-model="stdId5" placeholder="">
                <el-option
                  v-for="item in optionsListStandard"
                  :key="item.id"
                  :label="item.desc"
                  :value="item.id"
                />
              </el-select>
            </div>
            <div class="select-item">
              <label>请选择预测航线</label>
              <el-select v-model="routeCode5" placeholder="">
                <el-option
                  v-for="item in optionsRouterSaveLists"
                  :key="item.id"
                  :label="item.code"
                  :value="item.id"
                />
              </el-select>
            </div>
          </div>
        </div>
        <!-- 航路分时预测 -->
        <div
          v-if="changeCurIndex == 6"
          class="rightInfo custom-select-container"
        >
          <div class="airport-select-container">
            <div class="select-item">
              <label>预测星座</label>
              <el-select v-model="optionsListSatsysDefault6" placeholder="">
                <el-option
                  v-for="item in optionsListSatsys"
                  :key="item.id"
                  :label="item.desc"
                  :value="item.id"
                />
              </el-select>
            </div>
            <div class="select-item">
              <label>预测仰角（度）</label>
              <el-select v-model="optionsListAngleDefault6" placeholder="">
                <el-option
                  v-for="item in optionsListAngle"
                  :key="item.id"
                  :label="item.desc"
                  :value="item.id"
                />
              </el-select>
            </div>
            <div class="select-item">
              <label>算法</label>
              <el-select v-model="optionsListAlgorithmDefault6" placeholder="">
                <el-option
                  v-for="item in optionsListAlgorithm"
                  :key="item.id"
                  :label="item.desc"
                  :value="item.id"
                />
              </el-select>
            </div>
            <div class="select-item">
              <label>最低运行标准</label>
              <el-select v-model="stdId6" placeholder="">
                <el-option
                  v-for="item in optionsListStandard"
                  :key="item.id"
                  :label="item.desc"
                  :value="item.id"
                />
              </el-select>
            </div>
            <div class="select-item">
              <label>请选择预测航线</label>
              <el-select v-model="routeCode6" placeholder="">
                <el-option
                  v-for="item in optionsRouterSaveLists"
                  :key="item.id"
                  :label="item.code"
                  :value="item.id"
                />
              </el-select>
            </div>
            <div class="select-item">
              <label>请选择开始时间（UTC）</label>
              <el-date-picker
                :show-now="false"
                v-model="selectedAirlinesSplitTime"
                type="datetime"
                placeholder=""
                class="custom-datetime-picker"
              />
            </div>
          </div>
        </div>
        <!-- 航线分时预测 7 -->
        <div
          v-if="changeCurIndex == 7"
          class="rightInfo custom-select-container"
        >
          <div class="airport-select-container">
            <div class="select-item select-item7">
              <label>起飞机场仰角（度）</label>
              <el-select v-model="optionsListAngleDefault71" placeholder="">
                <el-option
                  v-for="item in optionsListAngle"
                  :key="item.id"
                  :label="item.desc"
                  :value="item.id"
                />
              </el-select>
            </div>
            <div class="select-item select-item7">
              <label>起飞机场</label>
              <el-select v-model="airport71" placeholder="">
                <el-option
                  v-for="item in airportList"
                  :key="item.id"
                  :label="`(${item.airportCode})${item.city}/${item.name}`"
                  :value="item.airportCode"
              /></el-select>
            </div>
            <div class="select-item select-item7">
              <label>目的机场仰角（度）</label>
              <el-select v-model="optionsListAngleDefault72" placeholder="">
                <el-option
                  v-for="item in optionsListAngle"
                  :key="item.id"
                  :label="item.desc"
                  :value="item.id"
                />
              </el-select>
            </div>
            <div class="select-item select-item7">
              <label>目的机场</label>
              <el-select v-model="airport72" placeholder="">
                <el-option
                  v-for="item in airportList"
                  :key="item.id"
                  :label="`(${item.airportCode})${item.city}/${item.name}`"
                  :value="item.airportCode"
              /></el-select>
            </div>
            <div class="select-item select-item7">
              <label>航路仰角（度）</label>
              <el-select v-model="optionsListAngleDefault73" placeholder="">
                <el-option
                  v-for="item in optionsListAngle"
                  :key="item.id"
                  :label="item.desc"
                  :value="item.id"
                />
              </el-select>
            </div>
            <div class="select-item select-item7">
              <label>航路算法</label>
              <el-select v-model="optionsListAlgorithmDefault7" placeholder="">
                <el-option
                  v-for="item in optionsListAlgorithm"
                  :key="item.id"
                  :label="item.desc"
                  :value="item.id"
                />
              </el-select>
            </div>
            <div class="select-item select-item7">
              <label>航路运行标准</label>
              <el-select v-model="stdId7" placeholder="">
                <el-option
                  v-for="item in optionsListStandard"
                  :key="item.id"
                  :label="item.desc"
                  :value="item.id"
                />
              </el-select>
            </div>
            <div class="select-item select-item7">
              <label>预测星座</label>
              <el-select v-model="optionsListSatsysDefault7" placeholder="">
                <el-option
                  v-for="item in optionsListSatsys"
                  :key="item.id"
                  :label="item.desc"
                  :value="item.id"
                />
              </el-select>
            </div>
            <div class="select-item select-item7">
              <label>起始时间（UTC）</label>
              <el-date-picker
                :show-now="false"
                v-model="selectedstartTimeDateTime7"
                type="datetime"
                placeholder=""
                class="custom-datetime-picker"
              />
            </div>
            <div class="select-item select-item7 select-item7short">
              <label>飞行持续时间</label>
              <el-input v-model="flightHours7" /><span class="boxspan">时</span>
              <el-input v-model="flightMinutes7" /><span
                class="boxspan"
                style="margin-right: 0px"
                >分</span
              >
            </div>
            <div class="select-item">
              <label>航路入口点</label>
              <el-select v-model="typesWaypoint71" placeholder="请选择">
                <el-option
                  v-for="item in typesWaypointLists"
                  :key="item.id"
                  :label="item.name"
                  :value="item.name"
                />
              </el-select>
            </div>
            <div class="select-item">
              <label>航路代码</label>
              <el-select v-model="routeCode7" placeholder="请选择">
                <el-option
                  v-for="item in optionsRouterSaveLists"
                  :key="item.id"
                  :label="item.code"
                  :value="item.code"
                />
              </el-select>
            </div>
            <div class="select-item">
              <label>航路出口点</label>
              <el-select v-model="typesWaypoint72" placeholder="请选择">
                <el-option
                  v-for="item in typesWaypointLists"
                  :key="item.id"
                  :label="item.name"
                  :value="item.name"
                />
              </el-select>
            </div>
            <div class="select-item" style="margin-bottom: 8px">
              <label>航路名称</label>
              <div class="routerName">
                <div class="innerBox">
                  <el-checkbox
                    v-for="(item, index) in routeSegments"
                    :key="index"
                    v-model="item.checked"
                    class="white-text-checkbox"
                    @change="handleCheckboxChange(index)"
                  >
                    {{ item.entryWaypointName }}……{{ item.routeCode }}……{{
                      item.exitWaypointName
                    }}
                  </el-checkbox>
                  >
                </div>
              </div>
            </div>
            <div class="kindBtnChanges">
              <div class="btnBox" @click="insertItem">插入选中航路前</div>
              <div class="btnBox" @click="deleteItem">删除选中航路</div>
              <div class="btnBox" @click="addItem" style="margin-right: 0px">
                追加航路
              </div>
            </div>
            <div class="select-item" style="margin-bottom: 8px">
              <label>航线名称</label>
              <el-input v-model="airportRouterName7" placeholder="请输入" />
            </div>
            <div class="kindBtnChanges">
              <div class="btnBox" @click="handleSaveLine">保存航线</div>
              <div class="btnBox" @click="handleAirportRouterName">
                清除航线
              </div>
              <div
                @click="findSaveLine"
                class="btnBox"
                style="margin-right: 0px"
              >
                查看已保存航线
              </div>
            </div>
            <div class="select-item">
              <label>请选择已保存的航线</label>
              <el-select
                v-model="routeLinesCode7"
                @change="handleRouteChange"
                placeholder="请选择"
              >
                <el-option
                  v-for="item in airlinesSplitLists"
                  :key="item.id"
                  :label="item.code"
                  :value="item.code"
                />
              </el-select>
            </div>
          </div>
        </div>
        <div
          v-if="changeCurIndex == 1"
          @click="airportsResult"
          class="rightBottom"
        >
          开始预测
        </div>
        <div
          v-if="changeCurIndex == 2"
          @click="airportsResult2"
          class="rightBottom"
        >
          开始预测
        </div>
        <div
          v-if="changeCurIndex == 3"
          @click="airportsResult3"
          class="rightBottom"
        >
          开始预测
        </div>
        <div
          v-if="changeCurIndex == 4"
          @click="airportsResult4"
          class="rightBottom"
        >
          开始预测
        </div>
        <div
          v-if="changeCurIndex == 5"
          @click="airportsResult5"
          class="rightBottom"
        >
          开始预测
        </div>
        <div
          v-if="changeCurIndex == 6"
          @click="airportsResult6"
          class="rightBottom"
        >
          开始预测
        </div>
        <div
          v-if="changeCurIndex == 7"
          @click="airportsResult7"
          class="rightBottom"
        >
          开始预测
        </div>
      </div>
    </div>
    <div class="findRouteBox" v-if="saveLineBool">
      <div class="detailWrapBoxCe">
        <div
          style="border-radius: 12px; height: 100%; border: 2px solid #003b7a"
        >
          <div @click="clearDetailIndex" class="topBack">
            <i></i><span>已保存航线列表</span>
          </div>
          <div class="detailBody">
            <div class="tableScrollBox">
              <!-- currentPageData -->
              <el-table
                :data="saveRouteList"
                class="custom-table"
                style="width: 100%"
              >
                <el-table-column
                  prop="airlineCode"
                  label="航线名称"
                  width="320"
                />
                <el-table-column label="起飞机场">
                  <template #default="scope">
                    <span>
                      {{ scope.row.depAirport.city }}/{{
                        scope.row.depAirport.name
                      }}
                    </span>
                  </template>
                </el-table-column>
                <el-table-column label="目的机场">
                  <template #default="scope">
                    <span>
                      {{ scope.row.destAirport.city }}/{{
                        scope.row.destAirport.name
                      }}
                    </span>
                  </template>
                </el-table-column>
                <el-table-column
                  width="240"
                  prop="startTime"
                  label="起始时间(UTC)"
                />
                <el-table-column label="飞行持续时间">
                  <template #default="scope">
                    <span>
                      {{ formatNumber(scope.row.flightHours) }}:{{
                        formatNumber(scope.row.flightMinutes)
                      }}
                    </span>
                  </template>
                </el-table-column>
                <el-table-column label="操作" width="200">
                  <template #default="scope">
                    <el-button
                      link
                      type="primary"
                      size="small"
                      @click="handleEdit(scope.row)"
                      >预测</el-button
                    >
                    <el-button
                      link
                      type="primary"
                      size="small"
                      @click="handleEdit(scope.row)"
                      >修改</el-button
                    >
                    <el-button
                      link
                      type="primary"
                      size="small"
                      @click="handleDelete(scope.row)"
                      >删除</el-button
                    >
                  </template>
                </el-table-column>
              </el-table>
            </div>
            <!-- <el-pagination
              class="custom-pagination"
              background
              layout="total, sizes, prev, pager, next, jumper"
              :total="total"
              :page-sizes="[10, 20, 30, 40]"
              :page-size="pageSize"
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
            /> -->
          </div>
        </div>
      </div>
    </div>
    <div class="footerTime">
      <p>当前时间(UTC)：{{ utcTime }}</p>
    </div>
  </div>
</template>

<script setup>
import { ref, defineAsyncComponent, onMounted } from "vue";
import dayjs from "dayjs";
import { useTime } from "@/utils/tools/useTime";
import { ElMessage } from "element-plus";
import {
  forecastTypesApi,
  selectionsGetApi,
  airportsResultApi,
  airportsResultTerminalApi,
  airportsAreasRaimStaticApi,
  forecastAreaRaimStatisticsApi,
  forecastRouteRaimSituationApi,
  userAirlinesSplitApi,
  typesWaypointApi,
  putUserAirlinesSplitApi,
  postUserAirlinesSplitApi,
  deleteUserAirlinesSplitApi,
  userAirlinesSplitIdApi,
  postForecastRouteSplitApi,
  postForecastAirLineSplitApi,
} from "@/api/tabOne";
import { airportsApi, getWayPointsApi } from "@/api/home";
import localStorageUtil from "@/utils/tools/localStorageUtil";

const InnterMap = defineAsyncComponent({
  loader: () => import("@/views/raim/components/innerMap.vue"),
  errorComponent: { template: "<div>error</div>" },
  timeout: 5000,
});

// 左下角信息展示
let leftInfoBox = ref({});

// 机场预测
let airTestsObj = ref({});
// 机场终端预测
let airTests1Obj = ref({});
// 区域统计预测
let airTestsAreaObj = ref([]);
// 航路态势预测
let airTestsRouteObj = ref([]);
// 航路分时预测/航线分时预测
let airTestsFilterObj = ref([]);

// 地图组件需要更新的属性props
let airports = ref([]); // 绘制的默认机场
let airports1 = ref([]); // 机场绘制返回的1-5个机场
let airports2 = ref([]); // 机场终端预测返回的1-5个机场
let areaStatic = ref([]); // 区域静态预测返回的 多个色块
let areaStatic1 = ref([]); // 区域统计预测返回的 多个色块
let routeWayPoints = ref([]); // 航路态势预测返回的航路

let airportList = ref([]); // 所有机场列表（ref数组）
let optionsListAngle = ref([]); // 角度列表
let optionsListAlgorithm = ref([]); // 算法列表
let optionsListSatsys = ref([]); // 星座列表
let optionsListStandard = ref([]); // 标准列表
let optionsRouterSaveLists = ref([]); // 请选择已保存的航路

// 机场预测相关数据
let airport11 = ref("");
let airport12 = ref("");
let airport13 = ref("");
let airport14 = ref("");
let airport15 = ref("");
let optionsListAngleDefault = ref("");
let optionsListAlgorithmDefault = ref("");
let optionsListSatsysDefault = ref("");

// 机场终端区预测相关数据
let airport21 = ref("");
let airport22 = ref("");
let airport23 = ref("");
let airport24 = ref("");
let airport25 = ref("");
let optionsListAngleDefault2 = ref("");
let optionsListAlgorithmDefault2 = ref("");
let optionsListSatsysDefault2 = ref("");

// 区域静态预测相关数据
let optionsListAngleDefault3 = ref("");
let optionsListAlgorithmDefault3 = ref("");
let optionsListSatsysDefault3 = ref("");
const selectedAreaDateTime = ref(null);

// 区域统计预测相关数据
let timeArrObj = ref([
  { id: "0", desc: "关闭" },
  { id: "1", desc: "5" },
  { id: "2", desc: "10" },
  { id: "3", desc: "15" },
  { id: "4", desc: "20" },
  { id: "5", desc: "25" },
  { id: "6", desc: "30" },
]);
let optionsListAngleDefault4 = ref("");
let optionsListAlgorithmDefault4 = ref("");
let optionsListSatsysDefault4 = ref("");
const handleAreaStartTime = ref(null);
const handleAreaEndTime = ref(null);
const autoUpdateTime = ref("0");
// let optionsListStandard = ref([]); // 标准列表

// 航路态势预测相关数据
let optionsListAngleDefault5 = ref("");
let optionsListAlgorithmDefault5 = ref("");
let optionsListSatsysDefault5 = ref("");
let stdId5 = ref("");
let routeCode5 = ref("");

// 航路分时预测相关数据
let airlinesSplitListsObj = ref([]);
let airlinesSplitLists = ref([]);
let optionsListAngleDefault6 = ref("");
let optionsListAlgorithmDefault6 = ref("");
let optionsListSatsysDefault6 = ref("");
let stdId6 = ref("");
let routeCode6 = ref("");
const selectedAirlinesSplitTime = ref(null);

// 航线分时预测相关数据
const typesWaypointLists = ref([]);
const routeSegments = ref([]); // 复选框项目列表（存储对象）
const optionsListAngleDefault71 = ref("");
const optionsListAngleDefault72 = ref("");
const optionsListAngleDefault73 = ref("");
const airport71 = ref("");
const airport72 = ref("");
const optionsListAlgorithmDefault7 = ref("");
const stdId7 = ref("");
const optionsListSatsysDefault7 = ref("");
const selectedstartTimeDateTime7 = ref(null);
const flightHours7 = ref("");
const flightMinutes7 = ref("");
const routeLinesCode7 = ref("");
const routeCode7 = ref("");
const typesWaypoint71 = ref("");
const typesWaypoint72 = ref("");
const airportRouterName7 = ref("");

let changeCurIndex = ref("1");
let saveLineBool = ref(false);
let saveRouteId = ref("");
let isEditRef = ref(false);
let saveRouteList = ref([]); //查看已保存航线列表页- 航线分时预测
const { utcTime, formatTimeHasDay, getDaysLaterFormatted } = useTime();

// 机场预测结果
const airportsResult = async () => {
  let paramsObj = {
    params: {},
    period: {},
    airportCodes: [],
  };
  paramsObj.params.algorithmId = optionsListAlgorithmDefault.value;
  paramsObj.params.angleId = optionsListAngleDefault.value;
  paramsObj.params.satSysId = optionsListSatsysDefault.value;
  // paramsObj.period.endTime = localStorageUtil.get("endTime") || "";
  // paramsObj.period.startTime = localStorageUtil.get("startTime") || "";
  paramsObj.period.endTime = "2025/08/28 00:00:00";
  paramsObj.period.startTime = "2025/08/25 00:00:00";
  paramsObj.airportCodes = [
    airport11.value,
    airport12.value,
    airport13.value,
    airport14.value,
    airport15.value,
  ];
  const { code, data } = await airportsResultApi(paramsObj);
  if (code === 200) {
    if (data.empty) {
      ElMessage.warning("预测结果为空");
    }
    airports.value = airportList.value; // 默认绘制机场
    const mergeData = mergeAirportData(airports.value, data);
    airTestsObj.value = mergeData; // 机场预测结果
    leftInfoBox.value.sf = getDescById(
      optionsListAlgorithm.value,
      optionsListAlgorithmDefault.value
    );
    leftInfoBox.value.angle = getDescById(
      optionsListAngle.value,
      optionsListAngleDefault.value
    );
    leftInfoBox.value.star = getDescById(
      optionsListSatsys.value,
      optionsListSatsysDefault.value
    );
    leftInfoBox.value.nanu = data.extra.nanuPrns;
    leftInfoBox.value.go = "RNPO.3";
    leftInfoBox.value.almanacWeek = data.extra.almanacWeek;
    leftInfoBox.value.secondsOfWeek = data.extra.secondsOfWeek;
    leftInfoBox.value.time = utcTime.value;

    const formattedArr = formatAirportData(mergeData);
    airports1.value = formattedArr;
  }
};
// 机场终端区预测
const airportsResult2 = async () => {
  let paramsObj = {
    params: {},
    period: {},
    airportCodes: [],
  };
  paramsObj.params.algorithmId = optionsListAlgorithmDefault2.value;
  paramsObj.params.angleId = optionsListAngleDefault2.value;
  paramsObj.params.satSysId = optionsListSatsysDefault2.value;
  paramsObj.period.endTime = localStorageUtil.get("endTime") || "";
  paramsObj.period.startTime = localStorageUtil.get("startTime") || "";
  // paramsObj.period.endTime = "2025/08/28 00:00:00";
  // paramsObj.period.startTime = "2025/08/25 00:00:00";
  paramsObj.airportCodes = [
    airport21.value,
    airport22.value,
    airport23.value,
    airport24.value,
    airport25.value,
  ];
  const { code, data } = await airportsResultTerminalApi(paramsObj);
  if (code === 200) {
    if (data.empty) {
      ElMessage.warning("预测结果为空");
    }
    airports.value = airportList.value; // 默认绘制机场
    const mergeData = mergeAirportData(airports.value, data);
    airTests1Obj.value = mergeData; // 机场预测结果
    leftInfoBox.value.sf = getDescById(
      optionsListAlgorithm.value,
      optionsListAlgorithmDefault2.value
    );
    leftInfoBox.value.angle = getDescById(
      optionsListAngle.value,
      optionsListAngleDefault2.value
    );
    leftInfoBox.value.star = getDescById(
      optionsListSatsys.value,
      optionsListSatsysDefault2.value
    );
    leftInfoBox.value.nanu = data.extra.nanuPrns;
    leftInfoBox.value.go = "RNPO.3";
    leftInfoBox.value.almanacWeek = data.extra.almanacWeek;
    leftInfoBox.value.secondsOfWeek = data.extra.secondsOfWeek;
    leftInfoBox.value.time = utcTime.value;

    const formattedArr = formatAirportData(mergeData);
    airports2.value = formattedArr;
  }
};

// 区域静态预测
const airportsResult3 = async () => {
  let params = {};
  params.algorithmId = optionsListAlgorithmDefault3.value;
  params.angleId = optionsListAngleDefault3.value;
  params.satSysId = optionsListSatsysDefault3.value;
  params.forecastTime = dayjs(selectedAreaDateTime.value).format(
    "YYYY/MM/DD HH:mm:ss"
  );
  // params.forecastTime = "2025/08/26 00:00:00";
  const { code, data } = await airportsAreasRaimStaticApi(params);
  if (code === 200) {
    if (data.empty) {
      ElMessage.warning("预测结果为空");
    }
    leftInfoBox.value.sf = getDescById(
      optionsListAlgorithm.value,
      optionsListAlgorithmDefault3.value
    );
    leftInfoBox.value.angle = getDescById(
      optionsListAngle.value,
      optionsListAngleDefault3.value
    );
    leftInfoBox.value.star = getDescById(
      optionsListSatsys.value,
      optionsListSatsysDefault3.value
    );
    leftInfoBox.value.nanu = data.extra.nanuPrns;
    leftInfoBox.value.go = "RNAV2";
    leftInfoBox.value.almanacWeek = data.extra.almanacWeek;
    leftInfoBox.value.secondsOfWeek = data.extra.secondsOfWeek;
    leftInfoBox.value.time = utcTime.value;

    areaStatic.value = data.areaStaticResults;
    areaStatic1.value = [];
  }
};

// 区域统计预测
const airportsResult4 = async () => {
  let paramsObj = {
    params: {},
    period: {},
  };
  paramsObj.params.algorithmId = optionsListAlgorithmDefault4.value;
  paramsObj.params.angleId = optionsListAngleDefault4.value;
  paramsObj.params.satSysId = optionsListSatsysDefault4.value;
  if (!handleAreaStartTime.value || !handleAreaEndTime.value) {
    ElMessage.warning("请选择完整的预测时间范围");
    return;
  }
  const startTime = dayjs(handleAreaStartTime.value);
  const endTime = dayjs(handleAreaEndTime.value);
  if (startTime.isAfter(endTime)) {
    ElMessage.error("预测结束时间小于预测开始时间");
    return;
  }
  paramsObj.period.startTime = dayjs(handleAreaStartTime.value).format(
    "YYYY/MM/DD HH:mm:ss"
  );
  paramsObj.period.endTime = dayjs(handleAreaEndTime.value).format(
    "YYYY/MM/DD HH:mm:ss"
  );

  const { code, data } = await forecastAreaRaimStatisticsApi(paramsObj);
  if (code === 200) {
    if (data.empty) {
      ElMessage.warning("预测结果为空");
    }
    leftInfoBox.value.sf = getDescById(
      optionsListAlgorithm.value,
      optionsListAlgorithmDefault4.value
    );
    leftInfoBox.value.angle = getDescById(
      optionsListAngle.value,
      optionsListAngleDefault4.value
    );
    leftInfoBox.value.star = getDescById(
      optionsListSatsys.value,
      optionsListSatsysDefault4.value
    );
    leftInfoBox.value.nanu = data.extra.nanuPrns;
    leftInfoBox.value.go = "RNAV2";
    leftInfoBox.value.almanacWeek = data.extra.almanacWeek;
    leftInfoBox.value.secondsOfWeek = data.extra.secondsOfWeek;
    leftInfoBox.value.time = utcTime.value;

    areaStatic1.value = data.areaStatisticsResults;
    airTestsAreaObj.value = data.areaStatisticsResults;
    areaStatic.value = [];
  }
};

// 航路态势预测
const airportsResult5 = async () => {
  let paramsObj = {
    params: {},
    period: {},
  };
  paramsObj.params.algorithmId = optionsListAlgorithmDefault5.value;
  paramsObj.params.angleId = optionsListAngleDefault5.value;
  paramsObj.params.satSysId = optionsListSatsysDefault5.value;
  paramsObj.params.stdId = stdId5.value;
  const endDayTime = getDaysLaterFormatted(
    formatTimeHasDay(utcTime.value) + " 00:00:00"
  );
  paramsObj.period.endTime = endDayTime + " 00:00:00";
  // paramsObj.period.endTime = "2025/08/12" + " 00:00:00";
  // const date = new Date();
  paramsObj.period.startTime = formatTimeHasDay(utcTime.value) + " 00:00:00";
  // paramsObj.period.startTime = "2025/08/11" + " 00:00:00";
  console.log(endDayTime, "endDayTime");
  console.log(
    formatTimeHasDay(utcTime.value),
    "formatTimeHasDay(utcTime.value)"
  );
  paramsObj.routeCode = routeCode5.value;
  const { code, data } = await forecastRouteRaimSituationApi(paramsObj);
  if (code === 200) {
    if (data.empty) {
      ElMessage.warning("预测结果为空");
    }
    leftInfoBox.value.sf = getDescById(
      optionsListAlgorithm.value,
      optionsListAlgorithmDefault5.value
    );
    leftInfoBox.value.angle = getDescById(
      optionsListAngle.value,
      optionsListAngleDefault5.value
    );
    leftInfoBox.value.star = getDescById(
      optionsListSatsys.value,
      optionsListSatsysDefault5.value
    );
    leftInfoBox.value.go = getDescById(optionsListStandard.value, stdId5.value);
    leftInfoBox.value.nanu = data.extra.nanuPrns;
    leftInfoBox.value.almanacWeek = data.extra.almanacWeek;
    leftInfoBox.value.secondsOfWeek = data.extra.secondsOfWeek;
    leftInfoBox.value.time = utcTime.value;

    airTestsRouteObj.value = data;
    if (data.empty) {
      routeWayPoints.value = [];
    } else {
      routeWayPoints.value = data.route.wayPoints;
    }
  }
};

// 航路分时预测
const airportsResult6 = async () => {
  let paramsObj = {
    params: {},
    period: {},
    routeCode: "",
  };
  paramsObj.params.algorithmId = optionsListAlgorithmDefault6.value;
  paramsObj.params.angleId = optionsListAngleDefault6.value;
  paramsObj.params.satSysId = optionsListSatsysDefault6.value;
  paramsObj.params.stdId = stdId6.value;
  const startTime = dayjs(selectedAirlinesSplitTime.value);
  paramsObj.period.startTime = startTime.format("YYYY/MM/DD HH:mm:ss");
  paramsObj.period.endTime = startTime
    .add(24, "hour")
    .format("YYYY/MM/DD HH:mm:ss");
  paramsObj.routeCode = routeCode6.value;
  const { code, data } = await postForecastRouteSplitApi(paramsObj);
  if (code === 200) {
    if (data.empty) {
      ElMessage.warning("预测结果为空");
    }
    // leftInfoBox.value.sf = getDescById(
    //   optionsListAlgorithm.value,
    //   optionsListAlgorithmDefault5.value
    // );
    // leftInfoBox.value.angle = getDescById(
    //   optionsListAngle.value,
    //   optionsListAngleDefault5.value
    // );
    // leftInfoBox.value.star = getDescById(
    //   optionsListSatsys.value,
    //   optionsListSatsysDefault5.value
    // );
    // leftInfoBox.value.go = getDescById(optionsListStandard.value, stdId5.value);
    // leftInfoBox.value.nanu = data.extra.nanuPrns;
    // leftInfoBox.value.almanacWeek = data.extra.almanacWeek;
    // leftInfoBox.value.secondsOfWeek = data.extra.secondsOfWeek;
    // leftInfoBox.value.time = utcTime.value;

    // airTestsRouteObj.value = data;
    // if (data.empty) {
    //   routeWayPoints.value = [];
    // } else {
    //   routeWayPoints.value = data.route.wayPoints;
    // }
  }
};

// 航线分时预测
const airportsResult7 = async () => {
  const routeSegmentsArray = routeSegments.value.map((item) => {
    return {
      entryWaypointName: item.entryWaypointName,
      routeCode: item.routeCode,
      exitWaypointName: item.exitWaypointName,
    };
  });
  const getDepAirport = getAirportByCode(airport71.value);
  const depAirportObj = {
    airportCode: getDepAirport.airportCode,
    city: getDepAirport.city,
    elevation: getDepAirport.elevation,
    latitude: getDepAirport.latitude,
    longitude: getDepAirport.longitude,
    name: getDepAirport.name,
  };
  const getDestAirportObj = getAirportByCode(airport72.value);
  const destAirportObj = {
    airportCode: getDestAirportObj.airportCode,
    city: getDestAirportObj.city,
    elevation: getDestAirportObj.elevation,
    latitude: getDestAirportObj.latitude,
    longitude: getDestAirportObj.longitude,
    name: getDestAirportObj.name,
  };
  const paramsObj = {
    airlineCode: airportRouterName7.value,
    depAirport: depAirportObj,
    destAirport: destAirportObj,
    depAngleId: optionsListAngleDefault71.value,
    destAngleId: optionsListAngleDefault72.value,
    routeAngleId: optionsListAngleDefault73.value,
    flightHours: flightHours7.value,
    flightMinutes: flightMinutes7.value,
    startTime: dayjs(selectedstartTimeDateTime7.value).format(
      "YYYY/MM/DD HH:mm:ss"
    ),
    forecastMode: "0",
    routeAlgorithmId: optionsListAlgorithmDefault7.value,
    routeStdId: stdId7.value,
    satSysId: optionsListSatsysDefault7.value,
    segments: routeSegmentsArray,
  };
  const { code, data } = await postForecastAirLineSplitApi(paramsObj);
  if (code === 200) {
    if (data.empty) {
      ElMessage.warning("预测结果为空");
    }
    // leftInfoBox.value.sf = getDescById(
    //   optionsListAlgorithm.value,
    //   optionsListAlgorithmDefault5.value
    // );
    // leftInfoBox.value.angle = getDescById(
    //   optionsListAngle.value,
    //   optionsListAngleDefault5.value
    // );
    // leftInfoBox.value.star = getDescById(
    //   optionsListSatsys.value,
    //   optionsListSatsysDefault5.value
    // );
    // leftInfoBox.value.go = getDescById(optionsListStandard.value, stdId5.value);
    // leftInfoBox.value.nanu = data.extra.nanuPrns;
    // leftInfoBox.value.almanacWeek = data.extra.almanacWeek;
    // leftInfoBox.value.secondsOfWeek = data.extra.secondsOfWeek;
    // leftInfoBox.value.time = utcTime.value;

    // airTestsRouteObj.value = data;
    // if (data.empty) {
    //   routeWayPoints.value = [];
    // } else {
    //   routeWayPoints.value = data.route.wayPoints;
    // }
  }
};

const getDescById = (arr, targetId) => {
  const idStr = String(targetId);
  const matchedItem = arr.find((item) => item.id === idStr);
  return matchedItem ? matchedItem.desc : null;
};

const mergeAirportData = (baseAirports, resultData) => {
  const airportMap = new Map();
  baseAirports.forEach((airport) => {
    airportMap.set(airport.airportCode, {
      name: airport.name,
      city: airport.city,
      longitude: airport.longitude,
      latitude: airport.latitude,
    });
  });

  // 复制结果数据，避免修改原始数据
  const mergedResult = { ...resultData };
  //处理机场预测结果（核心修改：从数组转为对象，便于后续处理）
  const airportForecastMap = {};
  mergedResult.airportForecasts.forEach((forecast) => {
    const { airport } = forecast;
    // 查找当前机场的基础信息
    const baseInfo = airportMap.get(airport.airportCode);
    if (!baseInfo) return; // 过滤无基础信息的机场

    // 为预测结果添加基础信息（保持原有字段名，兼容后续逻辑）
    airportForecastMap[airport.airportCode] = {
      ...forecast,
      name: baseInfo.name,
      city: baseInfo.city,
      longitude: baseInfo.longitude,
      latitude: baseInfo.latitude,
      // 兼容原有逻辑的 rawResults 字段（将 availPeriods 重命名）
      rawResults: forecast.availPeriods.map((period) => ({
        ...period,
        name: baseInfo.name,
        city: baseInfo.city,
        longitude: baseInfo.longitude,
        latitude: baseInfo.latitude,
      })),
    };
  });
  //  新增 airportResults 字段（保持与原有逻辑兼容）
  mergedResult.airportResults = airportForecastMap;

  //  处理 extra 字段（提取原有需要的信息，兼容左下角信息展示）
  mergedResult.prnCodes = mergedResult.extra?.nanuPrns || [];
  mergedResult.almanacWeek = mergedResult.extra?.almanacWeek || "";
  mergedResult.secondsOfWeek = mergedResult.extra?.secondsOfWeek || "";

  return mergedResult;
};
// 获取到绘制机场结果的机场
const formatAirportData = (data) => {
  const airportValues = Object.values(data.airportResults);
  const formattedArr = airportValues.map((airportItem) => {
    // const { airport } = airportItem;
    return {
      city: airportItem.airport.city,
      airportCode: airportItem.airport.airportCode,
      longitude: airportItem.airport.longitude,
      latitude: airportItem.airport.latitude,
      elevation: airportItem.airport.elevation,
      name: airportItem.airport.name, // 城市名称（如 "北京/首都"）
      value: [airportItem.longitude, airportItem.latitude], // 经纬度数组 [经度, 纬度]
    };
  });
  console.log(formattedArr, "----");
  return formattedArr;
};

const loadAllOptions = async () => {
  try {
    // 第一步：加载角度、星座、算法等下拉列表
    const { code: typeCode, data: typeData } = await forecastTypesApi();
    if (typeCode === 200) {
      optionsListAngle.value = typeData.angle || []; // 赋值ref.value，保留响应式
      optionsListAlgorithm.value = typeData.algorithm || [];
      optionsListSatsys.value = typeData.satsys || [];
      optionsListStandard.value = typeData.standard || [];
    }
    // 第二步：加载机场列表（依赖forecastTypes完成后执行）
    const { code: airportCode, data: airportData } = await airportsApi();
    if (airportCode === 200) {
      airportList.value = airportData.list || []; // 赋值ref.value
    }
    // 第三步：加载默认值（必须在下拉列表和机场列表都加载完成后）
    await loadDefaultValues(1, 1, 1);
  } catch (error) {
    console.error("初始化数据失败：", error);
  }
};
const formatNumber = (num) => {
  return String(Number(num)).padStart(2, "0");
};
const loadDefaultValues = async (methods = 1, type = 1, init) => {
  try {
    const { code: defaultCode, data: defaultData } = await selectionsGetApi(
      methods,
      type
    );
    if (type == 5 || type == 6 || type == 7) {
      const { code: defaultRouteCode, data: defaultRouteData } =
        await getWayPointsApi();
      if (defaultRouteCode === 200) {
        const routeData = defaultRouteData.list.map((outerItem) => ({
          code: outerItem.code,
          id: outerItem.id,
        }));
        optionsRouterSaveLists.value = routeData;
      }
    }

    if (type == 7) {
      const { code: defaultSplitCode, data: defaultSplitData } =
        await userAirlinesSplitApi({ preType: 0 });
      if (defaultSplitCode === 200) {
        airlinesSplitListsObj.value = defaultSplitData.list;
        const routeData = defaultSplitData.list.map((outerItem) => ({
          code: outerItem.airlineCode,
          name: outerItem.airlineName,
          id: outerItem.id,
        }));
        routeData.unshift({
          id: "0000000000",
          name: "请选择",
          code: "请选择",
        });
        airlinesSplitLists.value = routeData;
      }

      const { code: defaultWayPointCode, data: defaultWayPointData } =
        await typesWaypointApi({ preType: 0 });
      if (defaultWayPointCode === 200) {
        const routeData = defaultWayPointData.map((outerItem) => ({
          name: outerItem.name,
          id: outerItem.name,
        }));
        typesWaypointLists.value = routeData;
      }
    }

    if (defaultCode !== 200 || !defaultData) return;

    // 机场预测
    if (type == 1) {
      const angleId = String(defaultData.params.angleId || "");
      const algorithmId = String(defaultData.params.algorithmId || "");
      const satSysId = String(defaultData.params.satSysId || "");
      const airportCodes = defaultData.airportCodes || [];
      // 校验默认值是否在下拉列表中存在，避免无效回显
      const isAngleValid = optionsListAngle.value.some(
        (item) => item.id === angleId
      );
      const isAlgorithmValid = optionsListAlgorithm.value.some(
        (item) => item.id === algorithmId
      );
      const isSatelliteValid = optionsListSatsys.value.some(
        (item) => item.id === satSysId
      );
      // 设置默认值（仅在有效时设置）
      optionsListAngleDefault.value = isAngleValid ? angleId : "";
      optionsListAlgorithmDefault.value = isAlgorithmValid ? algorithmId : "";
      optionsListSatsysDefault.value = isSatelliteValid ? satSysId : "";
      // 设置机场默认值（校验机场airportCode是否存在）
      airport11.value = airportCodes[0] || "";
      airport12.value = airportCodes[1] || "";
      airport13.value = airportCodes[2] || "";
      airport14.value = airportCodes[3] || "";
      airport15.value = airportCodes[4] || "";
      // 机场预测
      if (init) {
        airportsResult();
      }
    }
    // 机场终端区预测
    if (type == 2) {
      // 处理默认值：转为字符串（与el-option的value类型匹配）
      const angleId = String(defaultData.params.angleId || "");
      const algorithmId = String(defaultData.params.algorithmId || "");
      const satSysId = String(defaultData.params.satSysId || "");
      const airportCodes = defaultData.airportCodes || [];
      // 校验默认值是否在下拉列表中存在，避免无效回显
      const isAngleValid = optionsListAngle.value.some(
        (item) => item.id === angleId
      );
      const isAlgorithmValid = optionsListAlgorithm.value.some(
        (item) => item.id === algorithmId
      );
      const isSatelliteValid = optionsListSatsys.value.some(
        (item) => item.id === satSysId
      );
      // 设置默认值（仅在有效时设置）
      optionsListAngleDefault2.value = isAngleValid ? angleId : "";
      optionsListAlgorithmDefault2.value = isAlgorithmValid ? algorithmId : "";
      optionsListSatsysDefault2.value = isSatelliteValid ? satSysId : "";

      airport21.value = airportCodes[0] || "";
      airport22.value = airportCodes[1] || "";
      airport23.value = airportCodes[2] || "";
      airport24.value = airportCodes[3] || "";
      airport25.value = airportCodes[4] || "";
    }
    // 区域静态预测
    if (type == 3) {
      // 处理默认值：转为字符串（与el-option的value类型匹配）
      const angleId = String(defaultData.angleId || "");
      const algorithmId = String(defaultData.algorithmId || "");
      const satSysId = String(defaultData.satSysId || "");
      // 校验默认值是否在下拉列表中存在，避免无效回显
      const isAngleValid = optionsListAngle.value.some(
        (item) => item.id === angleId
      );
      const isAlgorithmValid = optionsListAlgorithm.value.some(
        (item) => item.id === algorithmId
      );
      const isSatelliteValid = optionsListSatsys.value.some(
        (item) => item.id === satSysId
      );
      // 设置默认值（仅在有效时设置）
      optionsListAngleDefault3.value = isAngleValid ? angleId : "";
      optionsListAlgorithmDefault3.value = isAlgorithmValid ? algorithmId : "";
      optionsListSatsysDefault3.value = isSatelliteValid ? satSysId : "";
      selectedAreaDateTime.value = new Date(defaultData.forecastTime);
    }
    // 区域统计预测
    if (type == 4) {
      // 处理默认值：转为字符串（与el-option的value类型匹配）
      const angleId = String(defaultData.params.angleId || "");
      const algorithmId = String(defaultData.params.algorithmId || "");
      const satSysId = String(defaultData.params.satSysId || "");
      // 校验默认值是否在下拉列表中存在，避免无效回显
      const isAngleValid = optionsListAngle.value.some(
        (item) => item.id === angleId
      );
      const isAlgorithmValid = optionsListAlgorithm.value.some(
        (item) => item.id === algorithmId
      );
      const isSatelliteValid = optionsListSatsys.value.some(
        (item) => item.id === satSysId
      );
      // 设置默认值（仅在有效时设置）
      optionsListAngleDefault4.value = isAngleValid ? angleId : "";
      optionsListAlgorithmDefault4.value = isAlgorithmValid ? algorithmId : "";
      optionsListSatsysDefault4.value = isSatelliteValid ? satSysId : "";
      handleAreaStartTime.value = new Date(defaultData.period.startTime);
      handleAreaEndTime.value = new Date(defaultData.period.endTime);
      autoUpdateTime.value = defaultData.autoUpdateId;
    }
    // 航路态势预测
    if (type == 5) {
      // 处理默认值：转为字符串（与el-option的value类型匹配）
      const angleId = String(defaultData.params.angleId || "");
      const algorithmId = String(defaultData.params.algorithmId || "");
      const satSysId = String(defaultData.params.satSysId || "");
      const stdId = String(defaultData.params.stdId || "");
      // 校验默认值是否在下拉列表中存在，避免无效回显
      const isAngleValid = optionsListAngle.value.some(
        (item) => item.id === angleId
      );
      const isAlgorithmValid = optionsListAlgorithm.value.some(
        (item) => item.id === algorithmId
      );
      const isSatelliteValid = optionsListSatsys.value.some(
        (item) => item.id === satSysId
      );
      const isStdId = optionsListStandard.value.some(
        (item) => item.id === stdId
      );
      // 设置默认值（仅在有效时设置）
      optionsListAngleDefault5.value = isAngleValid ? angleId : "";
      optionsListAlgorithmDefault5.value = isAlgorithmValid ? algorithmId : "";
      optionsListSatsysDefault5.value = isSatelliteValid ? satSysId : "";
      stdId5.value = isStdId ? stdId : "";
      routeCode5.value = defaultData.routeCode;
    }
    // 航路分时预测
    if (type == 6) {
      const angleId = String(defaultData.params.angleId || "");
      const algorithmId = String(defaultData.params.algorithmId || "");
      const satSysId = String(defaultData.params.satSysId || "");
      const stdId = String(defaultData.params.stdId || "");
      const isAngleValid = optionsListAngle.value.some(
        (item) => item.id === angleId
      );
      const isAlgorithmValid = optionsListAlgorithm.value.some(
        (item) => item.id === algorithmId
      );
      const isSatelliteValid = optionsListSatsys.value.some(
        (item) => item.id === satSysId
      );
      const isStdId = optionsListStandard.value.some(
        (item) => item.id === stdId
      );
      optionsListAngleDefault6.value = isAngleValid ? angleId : "";
      optionsListAlgorithmDefault6.value = isAlgorithmValid ? algorithmId : "";
      optionsListSatsysDefault6.value = isSatelliteValid ? satSysId : "";
      stdId6.value = isStdId ? stdId : "";
      routeCode6.value = defaultData.routeCode;
      selectedAirlinesSplitTime.value = new Date(defaultData.period.startTime);
    }

    // 航线分时预测
    if (type == 7) {
      backStrFn(defaultData, false);
    }
  } catch (error) {
    console.error("加载默认值失败：", error);
  }
};
const backStrFn = (itemObj, isEdit) => {
  isEditRef.value = isEdit;
  saveRouteId.value = itemObj.id;
  optionsListAngleDefault71.value = String(itemObj.depAngleId || "");
  optionsListAngleDefault72.value = String(itemObj.destAngleId || "");
  optionsListAngleDefault73.value = String(itemObj.routeAngleId || "");
  airport71.value = String(itemObj.depAirport.airportCode || "");
  airport72.value = String(itemObj.destAirport.airportCode || "");
  optionsListAlgorithmDefault7.value = String(itemObj.routeAlgorithmId || "");
  stdId7.value = String(itemObj.routeStdId || "");
  optionsListSatsysDefault7.value = String(itemObj.satSysId || "");
  selectedstartTimeDateTime7.value = new Date(itemObj.startTime);
  flightHours7.value = String(itemObj.flightHours || "0");
  flightMinutes7.value = String(itemObj.flightMinutes || "0");
  const routeSegmentsNewArr = itemObj.segments.map((item) => {
    return {
      entryWaypointName: item.entryWaypointName,
      routeCode: item.routeCode,
      exitWaypointName: item.exitWaypointName,
      checked: false,
    };
  });
  routeSegments.value = routeSegmentsNewArr;
  airportRouterName7.value = String(itemObj.airlineCode || "");
};

const handleCheckboxChange = (currentIndex) => {
  routeSegments.value.forEach((item, index) => {
    item.checked = index === currentIndex;
  });
};
const getAirportByCode = (targetCode) => {
  return (
    airportList.value.find((airport) => airport.airportCode === targetCode) ||
    null
  );
};
const handleSaveLine = async () => {
  const routeSegmentsArray = routeSegments.value.map((item) => {
    return {
      entryWaypointName: item.entryWaypointName,
      routeCode: item.routeCode,
      exitWaypointName: item.exitWaypointName,
    };
  });
  const getDepAirport = getAirportByCode(airport71.value);
  const depAirportObj = {
    airportCode: getDepAirport.airportCode,
    city: getDepAirport.city,
    elevation: getDepAirport.elevation,
    latitude: getDepAirport.latitude,
    longitude: getDepAirport.longitude,
    name: getDepAirport.name,
  };
  const getDestAirportObj = getAirportByCode(airport72.value);
  const destAirportObj = {
    airportCode: getDestAirportObj.airportCode,
    city: getDestAirportObj.city,
    elevation: getDestAirportObj.elevation,
    latitude: getDestAirportObj.latitude,
    longitude: getDestAirportObj.longitude,
    name: getDestAirportObj.name,
  };
  const paramsObj = {
    airlineCode: airportRouterName7.value,
    depAirport: depAirportObj,
    destAirport: destAirportObj,
    depAngleId: optionsListAngleDefault71.value,
    destAngleId: optionsListAngleDefault72.value,
    routeAngleId: optionsListAngleDefault73.value,
    flightHours: flightHours7.value,
    flightMinutes: flightMinutes7.value,
    startTime: dayjs(selectedstartTimeDateTime7.value).format(
      "YYYY/MM/DD HH:mm:ss"
    ),
    forecastMode: "0",
    routeAlgorithmId: optionsListAlgorithmDefault7.value,
    routeStdId: stdId7.value,
    satSysId: optionsListSatsysDefault7.value,
    segments: routeSegmentsArray,
    id: saveRouteId.value,
  };

  if (isEditRef.value) {
    const { code } = await putUserAirlinesSplitApi(paramsObj);
    if (code === 200) {
      isEditRef.value = false;
      findSaveLine();
    }
  } else {
    const { code } = await postUserAirlinesSplitApi(paramsObj);
    if (code === 200) {
      findSaveLine1();
    }
  }
};

const handleAirportRouterName = () => {
  airportRouterName7.value = "";
};

const deleteItem = () => {
  const selectedIndex = routeSegments.value.findIndex((item) => item.checked);
  if (selectedIndex === -1) return;
  routeSegments.value.splice(selectedIndex, 1);
};
const addItem = () => {
  if (!typesWaypoint71.value || !routeCode7.value || !typesWaypoint72.value)
    return;
  const newItem = {
    entryWaypointName: typesWaypoint71.value,
    routeCode: routeCode7.value,
    exitWaypointName: typesWaypoint72.value,
    checked: false,
  };
  routeSegments.value.push(newItem);
};
const insertItem = () => {
  const selectedIndex = routeSegments.value.findIndex((item) => item.checked);
  if (
    selectedIndex === -1 ||
    !typesWaypoint71.value ||
    !routeCode7.value ||
    !typesWaypoint72.value
  )
    return;

  const newItem = {
    entryWaypointName: typesWaypoint71.value,
    routeCode: routeCode7.value,
    exitWaypointName: typesWaypoint72.value,
    checked: false,
  };
  routeSegments.value.splice(selectedIndex, 0, newItem);
  // 插入后取消原选中项的选中状态（可选，根据需求决定是否保留）
  // routeSegments.value[selectedIndex + 1].checked = false;
};
const clearDetailIndex = () => {
  isEditRef.value = false;
  saveLineBool.value = false;
};
const handleEdit = async (row) => {
  const { code, data } = await userAirlinesSplitIdApi(row.id);
  if (code === 200) {
    backStrFn(data, true);
    saveLineBool.value = false;
    // airlinesSplitLists.value = data.list;
  }
};
const handleDelete = async (row) => {
  const { code } = await deleteUserAirlinesSplitApi({
    airlineCode: row.airlineCode,
    preType: "0",
  });
  if (code === 200) {
    findSaveLine();
  }
};
// 查看已保存航线- 航线分时预测
const findSaveLine = async () => {
  const { code, data } = await userAirlinesSplitApi({
    preType: 0,
  });
  if (code === 200) {
    saveLineBool.value = true;
    airlinesSplitListsObj.value = data.list;
    saveRouteList.value = data.list;
    const routeData = data.list.map((outerItem) => ({
      code: outerItem.airlineCode,
      name: outerItem.airlineName,
      id: outerItem.id,
    }));
    routeData.unshift({
      id: "0000000000",
      name: "请选择",
      code: "请选择",
    });
    airlinesSplitLists.value = routeData;
  }
};
const findSaveLine1 = async () => {
  const { code, data } = await userAirlinesSplitApi({
    preType: 0,
  });
  if (code === 200) {
    saveRouteList.value = data.list;
    airlinesSplitListsObj.value = data.list;
    const routeData = data.list.map((outerItem) => ({
      code: outerItem.airlineCode,
      name: outerItem.airlineName,
      id: outerItem.id,
    }));
    routeData.unshift({
      id: "0000000000",
      name: "请选择",
      code: "请选择",
    });
    airlinesSplitLists.value = routeData;
  }
};

onMounted(() => {
  loadAllOptions(); // 整合所有异步加载逻辑
});
// 切换详情tab索引
const changeTabIndex = (index) => {
  changeCurIndex.value = index;
  loadDefaultValues(1, index);
};
// 处理选中变化的函数
const handleRouteChange = async (selectedCode) => {
  // 根据选中的code找到对应的item
  const selectedItem = airlinesSplitListsObj.value.find(
    (item) => item.airlineCode === selectedCode
  );
  if (selectedItem) {
    backStrFn(selectedItem, false);
  } else {
    const { code: defaultCode, data: defaultData } = await selectionsGetApi(
      2,
      7
    );
    if (defaultCode !== 200 || !defaultData) return;
    backStrFn(defaultData, false);
  }
};
</script>

<style scoped lang="scss">
.homeContainer {
  // height: 99.99vh;
  // min-height: 600px;
  // min-height: 100vh; /* 确保容器至少占满整个视口高度 */
  display: flex;
  flex-direction: column; /* 垂直方向排列子元素 */
  height: 100%;
  min-width: 1280px;
  // overflow-x: auto;
  // overflow-y: auto;
  position: relative;
  box-sizing: border-box;
}
.findRouteBox {
  // height: 100vh;
  position: absolute;
  background-color: #06112a;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  box-sizing: border-box;
}
.centerBox {
  display: flex;
  gap: 10px;
  // width: 100%;
  // min-height: 800px;
  padding: 15px 15px 0;
  justify-content: space-between;
  box-sizing: border-box;
  flex: 1;
  // overflow: auto;
}

.centerLeft {
  flex: 1;
  min-width: 790px;
  // height: 766px;
  position: relative;
  background-image: url("../../assets/images/raim/leftBox.png");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-position: center;
  margin: 0;
  // overflow-y: auto;
}
.centerLeft .mapInfoBox {
  position: absolute;
  left: 42px;
  bottom: 70px;
  width: 342px;
  height: 140px;
  padding-top: 16px;
  background-image: url("../../assets/images/raim/leftBottom.png");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-position: center;
  span {
    color: #fff;
    font-size: 12px;
    float: left;
    padding: 0 10px;
    margin-right: 10px;
    margin-left: 20px;
    line-height: 22px;
  }
}
// 右侧固定宽度容器
.centerRight {
  width: 370px;
  height: calc(100vh - 120px);
  // height: calc(100vh - 66px);
  // min-height: 800px; // 最小高度
  margin: 0;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
}
.centerRight .rightTop {
  margin-top: 0;
  // overflow: hidden;
  flex-wrap: wrap;
  .rightBtn {
    cursor: pointer;
    margin-right: 8px;
    margin-bottom: 8px;
    float: left;
    text-align: center;
    color: #c5d6e6;
    width: 130px;
    height: 32px;
    line-height: 32px;
    font-size: 16px;
    background: rgba(0, 175, 255, 0.1);
  }
  .rightBtnCur {
    color: #1fc6ff;
    border-bottom: 2px solid #1fc6ff;
    background: linear-gradient(
      0deg,
      rgba(31, 198, 255, 0.32) 0%,
      rgba(31, 198, 255, 0) 100%
    );
  }
}
.centerRight .rightInfo {
  // overflow: hidden;
  margin-top: 2px;
  position: relative;
  width: 100%;
  // min-height: calc(100vh - 270px);
  height: auto;
  // flex: 1;
  padding-top: 6px;
  background-image: url("../../assets/images/raim/rightInfoBox.png");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-position: center;
  // overflow-y: auto;
  box-sizing: border-box;
}
.centerRight .rightBottom {
  margin-top: 8px;
  cursor: pointer;
  color: #fff;
  text-align: center;
  font-size: 14px;
  font-weight: 400;
  line-height: 44px;
  width: 100%;
  height: 44px;
  border: 1px solid #00afff;
  background: #022a55;
  box-sizing: border-box;
}
.centerRight .rightBottom:active {
  background: #043e7c;
  border-color: #1fc6ff;
}
.footerTime {
  width: 100%;
  // min-width: 1280px;
  height: 28px;
  background-color: #050d24;
  box-sizing: border-box;
  p {
    color: #fff;
    text-align: right;
    font-size: 12px;
    line-height: 28px;
    padding-right: 16px;
  }
}
.airport-select-container {
  padding: 0 16px;
  height: auto;
  // height: 520px;
  // height: 425px;
  height: calc(100vh - 301px);
  // max-height: 600px;
  // max-height: calc(100vh - 270px);
  overflow-y: auto;
  box-sizing: border-box;
}
.airport-select-container::-webkit-scrollbar {
  width: 4px;
}
.airport-select-container::-webkit-scrollbar-track {
  background: rgba(6, 15, 37, 0.5);
  border-radius: 2px;
}
.airport-select-container::-webkit-scrollbar-thumb {
  background: rgba(0, 175, 255, 0.4);
  border-radius: 2px;
}
.airport-select-container::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 175, 255, 0.6);
}
.airport-select-container {
  scrollbar-width: thin;
  scrollbar-color: rgba(0, 175, 255, 0.4) rgba(6, 15, 37, 0.5);
}
.select-item {
  margin-bottom: 8px;
}
.select-item7 {
  margin-bottom: 8px;
  width: 176px;
  float: left;
  margin-right: 12px;
}
.select-item7:nth-child(even) {
  float: left;
  margin-right: 0px;
}
::v-deep .select-item7short .el-input {
  float: left;
  width: 56px;
  height: 28px;
}
::v-deep .select-item7short .boxspan {
  float: left;
  margin: 0 5px;
  font-size: 12px;
  color: #fff;
  line-height: 28px;
}
::v-deep .innerBox {
  overflow-y: auto;
  height: 96px;
  .white-text-checkbox {
    margin-bottom: 0;
    line-height: 32px;
    .el-checkbox__inner {
      // background-color: transparent;
    }
  }
}
::v-deep .routerName {
  border: 1px solid #003b7a;
  padding: 5px 12px;
  padding-top: 3px;
  .el-checkbox__label {
    vertical-align: text-top;
    color: #fff;
  }
  .innerBox::-webkit-scrollbar {
    width: 4px;
  }
  .innerBox::-webkit-scrollbar-track {
    background: rgba(6, 15, 37, 0.5);
    border-radius: 2px;
  }
  .innerBox::-webkit-scrollbar-thumb {
    background: rgba(0, 175, 255, 0.4);
    border-radius: 2px;
  }
  .innerBox::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 175, 255, 0.6);
  }
  .innerBox {
    scrollbar-width: thin;
    scrollbar-color: rgba(0, 175, 255, 0.4) rgba(6, 15, 37, 0.5);
  }
}
::v-deep .el-input__wrapper {
  height: 28px;
  line-height: 28px;
  font-size: 12px;
  background-color: transparent;
  box-shadow: none;
  color: #fff;
  border: 1px solid #003b7a;
}
.kindBtnChanges {
  margin-bottom: 8px;
  position: relative;
  overflow: hidden;
  .btnBox {
    margin-right: 12px;
    cursor: pointer;
    height: 32px;
    padding: 6px 9px;
    float: left;
    border-radius: 4px;
    border: 1px solid #003b7a;
    font-size: 14px;
    color: #fff;
    background: transparent;
  }
  .btnBoxCur {
    background: #00afff;
  }
}
.select-item label {
  text-align: left;
  display: block;
  font-size: 14px;
  margin-bottom: 4px;
  color: #fff !important;
}
.el-select {
  width: 100%;
  // border: 1px solid #003b7a;
}
::v-deep .custom-select-container .el-select__wrapper {
  background: transparent;
  box-shadow: none;
  height: 28px;
  min-height: 28px;
}
::v-deep .custom-select-container .el-select__selected-item {
  color: #fff !important;
}
::v-deep .custom-select-container .el-select__caret {
  color: #fff !important;
}
::v-deep .custom-select-container .el-scrollbar {
  background-color: #334155;
}
::v-deep .custom-select-container .el-select-dropdown {
  background-color: #1e293b;
  border: 1px solid #334155;
  box-shadow: none;
}
.el-select-dropdown__item {
  height: 28px !important;
  line-height: 28px !important;
  background-color: #060f25;
  color: #fff;
}
.el-select-dropdown__item:hover {
  background-color: #0c1e4b;
  color: #fff;
}
.el-select-dropdown__item.is-selected {
  background-color: #0c1e4b;
  color: #0083cf !important;
}
.el-select-dropdown__item.is-hovering {
  background-color: #0c1e4b;
  color: #fff;
}
:deep(.el-date-editor.el-input) {
  width: 100%;
  height: 28px;
  font-size: 12px;
}
:deep(.el-date-editor.el-input .el-input__wrapper) {
  color: #fff;
  background: transparent;
  border: 1px solid #003b7a;
  box-shadow: none;
}
:deep(.el-date-editor.el-input .el-input__inner) {
  color: #fff;
}
:deep(.el-input__inner) {
  color: #fff;
  height: 28px;
  line-height: 28px;
  font-size: 12px;
}
/* table样式保持不变 */
.detailWrapBoxCe {
  padding: 24px 24px 16px 24px;
  width: 100%;
  height: 100%;
  z-index: 1;
  .topBack {
    cursor: pointer;
    width: 100%;
    margin-left: 24px;
    height: 24px;
    margin-bottom: 16px;
    margin-top: 24px;
    i {
      float: left;
      width: 24px;
      height: 24px;
      background-image: url("../../assets/images/raim/back.png");
      background-repeat: no-repeat;
      background-size: contain;
      background-position: center;
    }
    span {
      color: #fff;
      font-size: 20px;
      text-align: left;
      float: left;
      margin-left: 4px;
      line-height: 28px;
      font-weight: 700;
    }
  }
  .detailBody {
    width: 100%;
    padding: 0 30px;
    overflow: hidden;
  }
}
::v-deep .custom-table .el-table__header {
  height: 40px;
  line-height: 40px;
  background: rgba(0, 175, 255, 0.2);
}
::v-deep .custom-table .el-table__header th {
  font-size: 12px;
  font-weight: 700;
  background: rgba(0, 175, 255, 0.2);
  color: #ffffff;
}
::v-deep .custom-table .el-table__row:nth-child(even) {
  background: rgba(0, 59, 122, 0.2) !important;
}
::v-deep .custom-table .el-table__row:nth-child(odd) {
  background-color: transparent;
}
::v-deep .custom-table .el-table__body td {
  color: #ffffff;
}
/* 自定义分页样式 */
.custom-pagination {
  /* float: right;
  margin-top: 20px; */
  position: absolute;
  right: 40px;
  bottom: 40px;
}
.custom-pagination .el-pagination__total {
  color: #ffffff;
}
.custom-pagination .el-pagination__sizes {
  color: #ffffff;
}
.custom-pagination .el-pagination__sizes .el-input__inner {
  background-color: transparent;
  color: #ffffff;
  border: 1px solid #3e465e;
}
.custom-pagination .el-pagination__sizes .el-input__inner:hover {
  border-color: #4aadf8;
}
.custom-pagination .el-pagination__btn {
  background-color: transparent;
  color: #ffffff;
  border: 1px solid #3e465e;
}
.custom-pagination .el-pagination__btn:hover {
  background-color: #4aadf8;
  border-color: #4aadf8;
}

.custom-pagination .el-pagination__active {
  background-color: #00a2ff;
  color: #ffffff;
  border: 1px solid #00a2ff;
}
.custom-pagination .el-pagination__jump {
  color: #ffffff;
}
.custom-pagination .el-input__inner {
  background-color: transparent;
  color: #ffffff;
  border: 1px solid #3e465e;
}
.custom-pagination .el-input__inner:hover {
  border-color: #4aadf8;
}
::v-deep .tableScrollBox {
  // height: 676px;
  height: calc(100% - 90px);
  overflow-y: auto;
}

::v-deep .tableScrollBox::-webkit-scrollbar {
  width: 2px;
}
::v-deep .tableScrollBox::-webkit-scrollbar-track {
  background: rgba(6, 15, 37, 0.5);
  border-radius: 2px;
}

::v-deep .tableScrollBox::-webkit-scrollbar-thumb {
  background: rgba(0, 175, 255, 0.4);
  border-radius: 2px;
}

::v-deep .tableScrollBox::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 175, 255, 0.6);
}

::v-deep .tableScrollBox {
  scrollbar-width: thin;
  scrollbar-color: rgba(0, 175, 255, 0.4) rgba(6, 15, 37, 0.5);
}
:deep(.el-table) {
  background-color: transparent !important;
  border: none;
}
:deep(.el-table__body tr) {
  background-color: transparent !important;
}

:deep(.el-table__header tr) {
  color: #c5d6e6;
  font-size: 12px;
  font-weight: 400;
  line-height: 20px;
  background-color: transparent !important;
}
:deep(.table-row-even) {
  background-color: rgba(0, 59, 122, 0.2) !important;
}

:deep(.table-row-odd) {
  background-color: transparent !important;
}

:deep(.el-table__row:hover > td) {
  background-color: rgba(0, 59, 122, 0.2) !important;
}

:deep(.el-table__inner-wrapper::before) {
  background-color: transparent !important;
}
:deep(.el-table__cell) {
  border-bottom: none !important;
}
:deep(
    .el-table--striped
      .el-table__body
      tr.el-table__row--striped
      td.el-table__cell
  ) {
  padding: 0;
  background-color: rgba(0, 59, 122, 0.2) !important;
}
:deep(.el-table .cell) {
  padding-right: 0 !important;
}
:deep(.el-pagination__sizes) {
  color: #fff;
}
:deep(.el-pagination__total) {
  color: #fff;
}
:deep(.el-pagination__jump) {
  color: #fff;
}
:deep(.el-pager li) {
  background-color: transparent !important;
  color: #fff;
  border: 1px solid #3e465e;
}
:deep(.el-pager li:hover) {
  background-color: #4aadf8 !important;
  color: #fff;
  border: 1px solid #4aadf8;
}
:deep(.el-pager .is-active) {
  background-color: #4aadf8 !important;
  color: #fff;
  border: 1px solid #4aadf8;
}
:deep(.el-pagination button),
:deep(.el-select__wrapper),
:deep(.el-input__wrapper) {
  background-color: transparent !important;
  color: #fff !important;
  border: 1px solid #003b7a;
}
:deep(.el-pagination .el-input__inner),
:deep(.el-select__placeholder) {
  color: #fff;
}

:deep(.el-table .el-table__cell) {
  padding: 4px 0 3px 0;
  font-size: 12px;
}
:deep(.custom-tooltip) {
  background-color: #286bf4 !important;
  color: #fff !important;
  border-radius: 8px !important;
  padding: 8px 12px !important;
  font-size: 12px !important;
}
</style>
